前幾天開始學習 Angular Component 與 Routing，網站也慢慢有了基本架構。

到目前為止，我已經完成：

Day 9 → Routing
Day 10 → Header Component
Day 11 → Header / Footer / Main Content 架構

但前幾天做的其實比較偏向「建立架構」。

今天終於要開始做一件比較有成就感的事情：

把之前在 Figma 裡設計好的首頁，真正做進 Angular。

這也是我第一次完整地把一個 Figma 頁面轉換成可以在瀏覽器中實際看到的網頁。

一、從 Figma 到 Angular

在前面的 Figma 階段，我已經完成智慧醫院網站的首頁設計。

首頁主要包含：

Header
   ↓
Hero
   ↓
快速服務
   ↓
醫師搜尋
   ↓
最新公告
   ↓
Footer

當時在 Figma 裡，我只需要思考：

這個區塊要放在哪裡？

顏色、字體、圖片和間距應該怎麼設計？

但開始進入 Angular 之後，思考方式就不一樣了。

現在除了畫面以外，還要思考：

這個區塊要寫在哪個 Component？
HTML 要怎麼建立？
CSS 要怎麼控制？
圖片要放在哪裡？
不同區塊之間的間距怎麼處理？
手機畫面會不會跑版？

所以我發現：

Figma 是設計畫面，而 Angular 是把這個畫面真正實作出來。

二、先把 Figma 首頁拆成幾個區塊

在開始寫程式之前，我沒有直接把整張 Figma 首頁照著畫面硬寫。

而是先把首頁拆成幾個主要區塊：

Home
│
├── Header
│
├── Hero
│
├── Quick Services
│
├── Doctor Search
│
├── Latest Announcements
│
└── Footer

其中 Header 和 Footer 已經在前幾天建立成共用 Component。

所以這次主要需要實作的是首頁自己的內容：

Hero
快速服務
醫師搜尋
最新公告

這樣也讓我更清楚：

Component 拆分不是把整張網頁全部塞在一個檔案裡，而是根據功能與重複使用的需求來規劃。

三、第一個區塊：Hero

首頁最上方是 Hero 區域。

這是使用者進入網站後最先看到的地方。

我的 Figma 設計主要是：

左側
網站主要標題
簡短介紹
行動按鈕

右側
醫療相關圖片

在 Angular 裡，我先使用 HTML 建立結構。

例如：

<section class="hero">
  <div class="hero-content">
    <h1>智慧醫療，讓就醫更簡單</h1>
    <p>
      提供便利的醫師查詢與預約服務。
    </p>

    <button>
      立即預約
    </button>
  </div>

  <div class="hero-image">
    <img src="..." alt="醫療圖片">
  </div>
</section>

接著再透過 CSS 調整：

文字大小
圖片大小
左右位置
區塊高度
內距
背景
按鈕

讓實際網頁盡量接近 Figma。

四、第二個區塊：快速服務

接下來是首頁的「快速服務」。

之前在 Figma 中，我設計了四個服務：

預約掛號
醫師查詢
查詢預約
就醫資訊

在畫面上是四張卡片。

因此 HTML 可以先建立成：

快速服務
│
├── 預約掛號
├── 醫師查詢
├── 查詢預約
└── 就醫資訊

接著利用 CSS 的 Flexbox 或 Grid，讓四張卡片排列在同一個區域。

這裡也讓我再次感受到：

Figma 裡把四張卡片排整齊很容易，但真正寫 CSS 時，就要自己決定「到底要怎麼排」。

例如：

每張卡片多寬？
卡片之間的距離？
手機畫面要不要換行？
文字太長怎麼辦？

這些都需要自己判斷。

五、第三個區塊：醫師搜尋

接下來是首頁的醫師搜尋功能。

之前在 Figma 設計時，我希望使用者可以直接從首頁：

搜尋醫師或專科。

因此畫面主要包含：

尋找醫師
[ 搜尋醫師姓名或專科        ] [搜尋]

目前這一天主要先完成「畫面」。

也就是：

輸入框
搜尋按鈕
標題
說明文字

真正的搜尋功能，例如：

使用者輸入醫師名稱
        ↓
Angular 取得輸入內容
        ↓
查詢醫師資料
        ↓
顯示搜尋結果

會留到後面的資料與功能實作。

這樣可以先把：

UI 實作

和：

功能實作

分開處理。

六、第四個區塊：最新公告

首頁最後一個主要內容區塊是最新公告。

之前在 Figma 裡，我最後選擇使用：

1
2
3

的方式切換不同公告內容。

主要是希望不要為了「查看全部」再增加一個公告列表頁面，讓 Prototype 和網站流程變得太複雜。

因此 Angular 版本也先依照原本的設計，把公告區域建立出來。

目前先處理：

公告標題
公告內容
公告分類
日期

至於之後要讓使用者真正點擊切換公告，就可以再加入 Angular 的互動邏輯。

七、最後把 Footer 放進首頁

首頁內容完成之後，最後就是 Footer。

因為 Day 11 已經完成 Footer Component，所以這裡不需要再重新寫一次。

只需要使用：

<app-footer></app-footer>

就可以把 Footer 放進網站。

因此現在整個首頁的架構大致變成：

<app-header>

    Home
    ├── Hero
    ├── Quick Services
    ├── Doctor Search
    └── Latest Announcements

<app-footer>

這也就是前幾天 Component 化的成果。

八、Figma 和實際網頁真的一模一樣嗎？

這是今天讓我印象很深的一件事情。

一開始我以為：

只要照著 Figma 的畫面寫 HTML 和 CSS，就可以做出一模一樣的網站。

但真正開始實作後才發現：

Figma 和實際網頁不會 100% 自動對應。

即使設計稿已經完成，還是有很多地方需要自己判斷。

例如：

① Figma 的尺寸

Figma 裡可能設定：

寬度：1200px
高度：500px

但到了實際網頁，還要思考：

如果螢幕只有 768px 呢？

② 文字長度

Figma 裡面的文字是固定的。

但實際網站未來可能會出現：

比較短的文字
比較長的文字
不同醫師名稱
不同公告內容

因此不能只追求某一個固定畫面完全一樣。

③ 圖片比例

Figma 裡的圖片已經調整好大小。

但真正放到網頁後，需要處理：

圖片寬度
圖片高度
object-fit
圖片比例

否則圖片可能變形。

④ 間距

Figma 裡可能很容易看出：

標題
↓ 40px
內容
↓ 60px
下一個區塊

但實際寫 CSS 時，需要自己決定：

margin
padding
gap

到底應該怎麼分配。

九、Figma 是參考，不是直接轉換結果

做到這裡，我開始理解一件事情：

Figma 設計稿不是一份可以直接轉成程式碼的答案。

它比較像是：

Figma
 ↓
設計規格
 ↓
自己判斷實作方式
 ↓
HTML
 ↓
CSS
 ↓
Angular Component
 ↓
實際網頁

所以真正開發時，需要把設計稿「翻譯」成程式。

而不是單純把畫面照抄一次。

十、實作過程中遇到的問題

1. Figma 和網頁的尺寸不完全一樣

Figma 的畫面是固定的設計稿，但實際網站會遇到不同螢幕尺寸。

解決方式

不完全照抄固定尺寸，而是根據實際網頁情況調整：

width
max-width
padding
margin
gap

讓版面可以有一定的彈性。

2. CSS 寫出來後，畫面和 Figma 有差距

實際開始寫 CSS 後，才發現：

字體大小
區塊高度
圖片位置
卡片間距
按鈕大小

都可能和設計稿有些不同。

解決方式

使用瀏覽器實際查看結果，再回頭調整 CSS。

也就是：

Figma
 ↓
第一次實作
 ↓
瀏覽器檢查
 ↓
調整 CSS
 ↓
再次確認

而不是認為第一次寫完就一定會完全正確。

3. 不知道哪些內容應該寫死，哪些之後要變成資料

例如最新公告現在可以先寫：

門診異動
系統維護
假日門診

但實際網站不可能永遠只有這幾筆資料。

解決方式

這一天先以完成 UI 為主。

先把畫面做出來，之後再透過 Angular 的 Data Binding 和後端資料，讓內容變成動態資料。

4. 原本的 Figma Component 要重新思考 Angular 實作方式

在 Figma 裡可以直接複製 Component。

但 Angular 裡需要思考：

這個區塊要不要建立 Component？
資料要怎麼傳入？
HTML 要怎麼寫？
CSS 要放在哪裡？

解決方式

先依照目前網站架構判斷。

Header、Footer 已經是共用 Component，而首頁中的內容則先放在 Home Component 中。

等到之後有真正需要重複使用時，再進一步拆分。

十一、第一次看到真正的 Angular 首頁

完成之後，第一次在瀏覽器看到自己的 Angular 首頁時，和之前單純看 Figma 的感覺很不一樣。

因為這一次不是：

「這是我設計的網站。」

而是：

「這是我真的寫出來的網站。」

目前雖然還只是前端畫面，搜尋、登入、預約等功能也還沒有真正連接資料庫。

但網站已經開始從：

Figma 設計稿

變成：

可以在瀏覽器執行的 Angular 網頁

這也是這個專案正式進入開發階段的一個重要里程碑。

十二、目前的首頁架構

完成今天的實作後，目前 Angular 首頁可以整理成：

App
│
├── HeaderComponent
│
├── HomeComponent
│   │
│   ├── Hero
│   ├── Quick Services
│   ├── Doctor Search
│   └── Latest Announcements
│
└── FooterComponent

而整個網站也開始形成：

Angular
│
├── 共用元件
│   ├── Header
│   └── Footer
│
├── 頁面
│   └── Home
│
└── Routing

之後其他頁面也可以依照同樣的方式慢慢加入。

十三、今天的成果

今天完成了第一個完整的 Angular 頁面：

智慧醫院網站首頁

包含：

• Header
• Hero
• 快速服務
• 醫師搜尋
• 最新公告
• Footer

而且這次不是重新設計一個畫面，而是直接按照之前已經完成的 Figma 設計進行實作。

整個流程變成：

Figma
  ↓
確認頁面結構
  ↓
拆分 HTML
  ↓
撰寫 CSS
  ↓
加入 Angular Component
  ↓
瀏覽器實際檢查
  ↓
調整版面
  ↓
完成首頁

十四、今天學到的重點

今天最大的收穫不是單純學會幾個 CSS 語法，而是開始理解：

從設計稿到真正的網站，中間還有一個「實作與判斷」的過程。

Figma 告訴我：

畫面應該長什麼樣子

Angular 則需要我決定：

這個畫面要怎麼做出來

因此，真正開始寫網頁後，我也開始更注意：

• HTML 結構
• CSS Layout
• Component 拆分
• 響應式版面
• 元件重複使用
• 未來資料如何放進畫面

這些都是單純看 Figma 設計稿時不一定會遇到的問題。

十五、下一步

目前首頁已經完成，但裡面的醫師搜尋還只是畫面。

下一步就可以開始讓畫面真正「有資料」。

例如：

醫師資料
   ↓
Angular
   ↓
Doctor Card
   ↓
顯示醫師姓名
科別
專長
照片

這時候就會開始接觸 Angular 很重要的：

Data Binding

讓資料不再是寫死在 HTML 裡，而是由 Angular 根據資料動態產生畫面。

從這裡開始，我的 Angular 開發也會慢慢從「做出畫面」，進入「讓畫面真正運作」的階段。